<template>
  <section id="OnlinePractice">
    <header>
      <div class="back"></div>
      <nav></nav>
    </header>
    <div class="main">
      <div class="road">
        <!-- 完成度显示 -->
        <div class="passOpen">
          <div class="completeness">
            <!-- 头像 -->
            <img src="" alt="">
            <span>100%</span>
          </div>
          <span class="unitName">单元名</span>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  
}
</script>


<style scope lang="scss">
#OnlinePractice{
  height: 7.68rem;
  // min-width: 13.49rem;
  position: relative;
  background: url("../../assets/img/OnlinePractice/onlineBg.jpg") left center;
  background-size: auto 100%;
  header{
    .back{
      position: absolute;
      top: .34rem;
      left: .26rem;
      width: .68rem;
      height: .46rem;
      background: url("../../assets/img/back.png") no-repeat center;
      background-size: auto 100%;
    }
    nav{
      position: absolute;
      top: 0;
      left: 3.37rem;
      width: 3.37rem;
      height: 1.08rem;
      background: url("../../assets/img/onlinePractice/nav_02.png") no-repeat center;
      background-size: auto; 
    }
  }
  .main{
    .road{
      .passOpen{
        .completeness{
          img{

          }
          span{

          }
        }
        .unitName{

        }
      }
      .passClose{

      }
    }
  }
}
</style>
